<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
</head>
<body>
</div>
<div class="container">
<h1>xx表单</h1>
<form class="needs-validation" novalidate>
    <div class="form-group">
        <label for="userName">用户名</label>
            <input type="text" name="" placeholder="请输入用户名" required class="form-control" pattern="/^[a-zA-Z0-9_-]{4,16}$/";>
            <small class="form-text form-muted">用户名正则[pattern="/^[a-zA-Z0-9_-]{4,16}$/"]，4到16位（字母，数字，下划线，减号）  </small>
            <div class="valid-feedback">验证名通过</div>
            <div class="invalid-feedback">验证名不通过(4到16位（字母，数字，下划线，减号）)</div>
    </div>
    <div class="form-group">
        <label for="userSex">性别</label>
            <br>
            <input type="radio" name="Gender" placeholder="请输入性别" ;>男
            <input type="radio" name="Gender" placeholder="请输入性别"  ;>女
            <small class="form-text form-muted">请输入性别 “男or女” </small>
            <div class="valid-feedback">验证名通过</div>
            <div class="invalid-feedback">验证名不通过 请输入性别 “男or女”</div>

    </div>
    <div class="form-group">
        <label for="mobile">手机号</label>
            <input type="text" name="mobile" placeholder="请输入手机号" required class="form-control" pattern="^1(3|4|5|6|7|8|9)\d{9}$";>
            <small class="form-text form-muted">手机号由11位数字组成[pattern="^1(3|4|5|6|7|8|9)\d{9}$"]</small>
            <div class="valid-feedback">手机号通过</div>
            <div class="invalid-feedback">手机号由11位数字组成</div>
    </div>
    <div class="form-group">
        <label for="birthday">出生年月</label>
            <input type="date" name="birthday" placeholder="请输入用户名" required class="form-control" pattern="";>
            <small class="form-text form-muted">范围1900-2020</small>
    </div>
    <div class="form-group">
        <label for="address">身份证号</label>
            <input type="text" name="" placeholder="请输入身份证号" required class="form-control" pattern="^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$";>
            <small class="form-text form-muted">身份证号（18位）正则[pattern="^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$";]</small>
    </div>
    <div class="form-group">
        <label for="address">E-mail</label>
            <input type="text" name="" placeholder="请输入E-mail" required class="form-control" pattern="^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$";>
            <small class="form-text form-muted">E-mail正则[pattern="^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$"]</small>
    </div>
    <input type="submit" class="btn btn-primary" value="提交">
</form>
</div>

    <script>
        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (function() {
            'use strict';
            window.addEventListener('load', function() {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName('needs-validation');
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function(form) {
                form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
                }, false);
            });
            }, false);
        })();
    </script>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
</body>
</html>